//导入父类
import defaultConfig from './default-option'

export default class Heatmap extends defaultConfig {
  constructor({ rows = [], columns = [], header = columns[0] }, settings = {}, extend = {}) {
    super()
    this.option = this.defaultConfig
    const axisData = columns.map(item => {
      return rows.map(list => list[item])
    })
    const newAxisData = axisData.map(item => [...new Set(item)])
    const seriesData = axisData[2].map((item, index) => {
      newAxisData[0].forEach((one, i) => {
        if (one == axisData[0][index]) {
          axisData[0][index] = i
        }
      })
      newAxisData[1].forEach((two, j) => {
        if (two == axisData[1][index]) {
          axisData[1][index] = j
        }
      })
      return [axisData[0][index], axisData[1][index], item]
    })
    this.option.series = [{
      // name: '我是一个legend',
      type: 'heatmap',
      data: seriesData,
    }]
    this.option = this.setNewStyle({ tooltip: { trigger: 'item' } }, this.option)
    this.mySettings(this.option, settings, newAxisData)
    this.option = this.setNewStyle(extend, this.option)
  }
  mySettings = (option, settings, newAxisData) => {
    this.setXYAxis(option, newAxisData)
    this.setVisualMap(option, newAxisData)
  }
  setXYAxis = (option, newAxisData) => {
    option.xAxis.data = newAxisData[0]
    option.xAxis = this.setNewStyle({
      axisLine: { show: false },
      axisTick: { show: false }
    }, option.xAxis)
    if (Object.prototype.toString.call(option.yAxis) === '[object Array]') {
      option.yAxis[0] = this.setNewStyle({
        axisLine: { show: false },
        axisTick: { show: false }
      }, option.yAxis[0])
      option.yAxis[0].data = newAxisData[1]
      option.yAxis[0].type = 'category'
    } else {
      option.yAxis.data = newAxisData[1]
      option.yAxis.type = 'category'
      option.yAxis = this.setNewStyle({
        axisLine: { show: false },
        axisTick: { show: false }
      }, option.yAxis)
    }
  }
  setVisualMap = (option, newAxisData) => {
    const minValue = Math.min(...newAxisData[2])
    const maxValue = Math.max(...newAxisData[2])
    option.visualMap = {
      min: minValue,
      max: maxValue,
      calculable: true,
      top: '5%',
      right: 20
    }
  }
}